<template>
	<view>
		<!-- 轮播图 -->
		<view class="swiper-view">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true" indicator-active-color="#ffffff">
				<swiper-item v-for="swiper in swiperList" :key="swiper.id">
					<image mode="aspectFill" :src="swiper.imgUrl"></image>
				</swiper-item>
			</swiper>
			<view class="keep-out"></view>
		</view>
		<view class="task">
			<view class="task-item" v-for="(item, index) in taskList" :key="index">
				<span class="task-state" v-if="item.state===0">敬请期待</span>
				<view class="task-item-top">
					<view class="grade-img">
						<img :src="`../../static/images/level/big/${parseInt(index)+1}.png`" alt="">
					</view>
					<view :class="['gradeName font-hyykhw', 'name'+index]"><i>{{item.gradeName}}</i></view>
				</view>
				<view class="task-item-bottom">
					<p>每单{{item.price}}元</p>
					<p>每日可领取{{item.count}}次任务</p>
				</view>
			</view>
		</view>
		<!--个人任务列表-->
		<view class="personal-task">
			<view class="personal-task-title">今日剩余领取次数：<span>27</span></view>
			<view class="personal-task-item" v-for="item in 5" :key="item">
				<view class="personal-task-item-left">
					<view class="task-icon">
						<img class="uni-image" src="../../static/images/icon/douyin.png" alt="">
					</view>
					<view>
						<view class="task-cont">
							<view class="cont-title">点赞赢现金</view>
							<view class="cont-price">+15元</view>
						</view>
						<view class="task-desc">剩余：7</view>
					</view>
				</view>
				<view class="personal-task-item-right">
					<u-button shape="square" class="receive">领取</u-button>
					<!--<u-button shape="square" class="has-receive">已领取</u-button>-->
				</view>
			</view>
		</view>
		<view class="deposit">
			<img src="../../static/images/icon/tuoguan.png" alt="">
			<view class="deposit-text">托管</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				levels: 0,
				swiperList: [],
				imgs: ["../../static/images/icon/douyin.png", "../../static/images/icon/weibo.png"],
				types: [],
				times: "",
				taskList: [
					{
						state: 1,
						gradeName: '游侠',
						price: 1.5,
						count: 3
					},
					{
						state: 1,
						gradeName: '骑士',
						price: 1.8,
						count: 10
					},
					{
						state: 1,
						gradeName: '子爵',
						price: 1.8,
						count: 35
					},
					{
						state: 1,
						gradeName: '伯爵',
						price: 2.15,
						count: 90
					},
					{
						state: 1,
						gradeName: '公爵',
						price: 2.25,
						count: 150
					},
					{
						state: 0,
						gradeName: '国王',
						price: 2.5,
						count: 300
					}
				]
			};
		},
		onLoad(option) {
		},
		onShow(option) {
			//用户信息
			this.$request.post("/member/getData", {
					dataType: 'json',
					responseType: 'text'
				})
				.then(res => {
					var list = res.data.json.userLevels;
					var isDouyin = (res.data.json.user && res.data.json.user.douyin) ? true : false;
					if(res.data.json.levels)
					if(isDouyin){
						for(let item of res.data.json.levels){
							if(item.isVip){
								this.levels = true;
								return;
							}
						}
					}



				})
			this.loadData();
		},
		methods: {
			loadData() {
				this.$request.post("/task/getType", {
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {
						this.types = res.data.json.type;
						this.swiperList = res.data.json.lbt;
						this.times = res.data.json.times;
					}).catch(error => {});

			}
		}
	}
</script>

<style lang="scss">
	/*引入特殊字体*/
	@font-face {
		font-family: fcdD;
		src: url('../../static/font/HYYaKuHeiW.ttf');
	}
	/*引用特殊字体*/
	.font-hyykhw{
		font-family: fcdD !important;
	}
	page {
		background-color: #f3f8fb;
	}
	/*轮播图样式*/
	.swiper-view {
		.swiper {
			width: 100%;
			height: 480rpx;

			image {
				width: 100%;
				height: 480rpx;
			}
		}

		.keep-out {
			width: 100%;
			height: 30upx;
			border-radius: 100% 100% 0 0;
			/* background-color: #ff570a;*/
			 /*background-color: #f8f8f8;*/
			margin-top: -15upx;
			position: absolute;
		}
	}
	/*任务列表样式*/
	.task{
		padding: 40rpx 20rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		&-item{
			width: 48%;
			border-radius: 4px;
			background: #fff;
			margin-bottom: 20rpx;
			min-height: 280rpx;
			text-align: center;
			font-size: 30rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			overflow: hidden;
			.task-state{
				position: absolute;
				right: -22px;
				background: #fad9ae;
				color: #af7e43;
				padding: 2px 20px;
				font-size: 24rpx;
				transform: rotate(45deg);
			}
			&-top{
				.gradeName{
					font-size: 45rpx;
					font-style: initial;
					color: #ffa446;
					padding-left: 40rpx;
				}
				.name1{
					color: #4f6ff6;
				}
				.name2{
					color: #996aea;
				}
				.name3{
					color: #f24d53;
				}
				.name4{
					color: #06abc3;
				}
				.name5{
					color: #f06719;
				}
				.grade-img{
					position: absolute;
					width: 130rpx;
					top: -20rpx;
					left: 20rpx;
					img{
						width: 100%;
					}
				}
			}
			&-bottom{
				p{
					color: #000;
					margin-top: 20rpx;
          font-size: 26rpx;
				}
			}
		}
	}
	/*个人任务列表*/
	.personal-task{
		padding: 0 0 20rpx;
		.personal-task-title{
			text-align: center;
			font-size: 32rpx;
			color: #9a9a9a;
			margin-bottom: 10px;
			span{
				color: #fc1556;
				font-weight: bold;
			}
	 	}
		.personal-task-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			padding: 35rpx 20rpx;
			border-bottom: 1px solid #f1f1f1;
			.personal-task-item-left{
				display: flex;
				align-items: center;
				.task-icon{
					margin-right: 10px;
					width: 120rpx;
					height: 120rpx;
					/*background: #fcf2cf;*/
					display: flex;
					justify-content: center;
					align-items: center;
					.uni-image{
						width: 100%;
						height: 100%;
						border-radius: 100%;
					}
				}
				.task-cont{
					display: flex;
					justify-content: center;
					align-items: center;
					.cont-title{
						color: #030d28;
						font-size: 30rpx;
					}
					.cont-price{
						font-size: 30rpx;
						padding-left: 20rpx;
						color: #e9a83c;
					}
				}
				.task-desc{
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #8f8f8f
				}
			}
			.personal-task-item-right{
				.receive{
					width: 70px;
					border-radius: 12rpx;
					color: #fff;
					font-size: 28rpx;
					background-color: #f9bb40;
					/* 浏览器不支持时显示 */
					background-image: linear-gradient(90deg, #f9bb40, #fce083);
				}
				.has-receive{
					width: 70px;
					border-radius: 50px;
					font-size: 28rpx;
					color: #fff;
					background-color: #b7b7b7;
				}
			}
		}
	}
	/*托管*/
	.deposit{
		position: fixed;
		bottom: 140rpx;
		right: 10px;
		z-index: 99;
		display: flex;
		text-align: center;
		flex-direction: column;
		justify-content: center;
		img{
			width: 50px;
		}
		.deposit-text{
			color: #8b8b8d;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
</style>
